<template>
    <div class="menu">
        <div @click="setCurrentKey(key)" :key="key" v-for="(val, key) in menu"
             :class="['menu-item', {active: key === currentKey}]">{{val}}
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      menu: ['男生', '女生', '电信&移动', '年龄(升序)'],
      currentKey: -1
    }
  },
  methods: {
    setCurrentKey (index) {
      this.currentKey = index
      // changeCurrentKey是在父组件on监听的方法
      // 第二个参数index是需要传的值
      this.$bus.$emit('changeCurrentKey', index)
    }
  }
}
</script>
<style scoped>
    .menu{
        position: fixed;
        left: 0;
        right: 0;
        bottom:0;
        line-height: 50px;
        background: orange;
        font-size: 0
    }
    .menu>div{
        display: inline-block;
        width: 25%;
        text-align: center;
        font-size: 14px;
        color: #fff
    }
    .menu>.active{
        color: orangered;
    }
</style>
